<template>
	<uni-popup :animation="true" ref="share" type="bottom" :custom="true">
		<view class="uni-share">
			<view class="uni-share-title">{{ title }}<i class="iconfont iconguanbi" @click="togglePopup()"></i></view>
			<view class="uni-share-content">
				<view v-for="(item, index) in items" :key="index" class="uni-share-content-box">
					<view class="uni-share-content-image">
						<i :class="item.icon" @click="handleClick(item.key || index)"></i>
					</view>
					<view class="uni-share-content-text">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
	props: {
		title: {
			type: String,
			default: '分享'
		},
		items: {
			type: Array,
			default: []
		}
	},
	data () {
		return {
			isopen: false
		}
	},
	components: {
		uniPopup
	},
	methods: {
		togglePopup() {
			this.isopen ? this.$refs['share'].close() : this.$refs['share'].open();
			this.isopen = !this.isopen
			console.log("share refs ==> ",this.$refs['share'])
		},
		handleClick (key) {
			this.$emit('shareClick', kay)
		}
	}
}
</script>

<style>
@import url("../../../static/font_lesson/iconfont.css");
/* 底部分享 */
.uni-share {height: 434upx;background: #fff;}
.uni-popup__mask {opacity: 0.3}
.uni-share-title{line-height:60upx;color:#333;font-size:34upx;padding:15upx 0;text-align:center;border-bottom:2upx solid #e5e5e5;font-family:Source Han Sans CN;font-weight:500}
.uni-share-title>i{position:absolute;right:30upx;color:#999}
.uni-share-content{display:flex;flex-wrap:wrap;height:346upx;align-items:center}
.uni-share-content-box{display:flex;flex-direction:column;align-items:center;width:25%;box-sizing:border-box}
.uni-share-content-image{display:flex;justify-content:center;align-items:center;width:60upx;height:60upx;overflow:hidden;border-radius:10upx}
.uni-share-content-image .image{width:100%;height:100%}
.uni-share-content-image i{font-size:52upx}
.uni-share-content-text{font-size:28upx;padding-top:5px;padding-bottom:10;font-family:Source Han Sans CN;font-weight:400;color:#999}
.uni-share-btn{height:90upx;line-height:90upx;border-top:2upx #f5f5f5 solid;text-align:center;color:#666}

</style>
